<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			#container {
				display: grid;
				/* 设置了 每行4列, 每列60px */
				grid-template-columns: repeat(4, 60px);
				/* 设置自动行填充（有多少行就多少行）, 每行60px */
				grid-template-rows: repeat(auto-fill, 60px);
				/* 行间距，列间距简写， 间距10px */
				gap: 10px;
				margin: 10px;
				justify-items: center;
				align-items: center;
			}

			div > div {
				background-color: #8ca0ff;
				width: 60px;
				height: 60px;
			}
			#container2 {
				margin-top: 20px;
				display: grid;
				grid-template-columns: repeat(12, 1fr);
				grid-template-rows: repeat(2, 80px);
				/* 盒子垂直剧中 */
				justify-items: center;
				align-items: center;
				/* 设所有置item在grid的位置 */
				/* justify-content: center;
				align-content: center; */
			}
			#container2 > div {
				/* 单给item项对齐 */
				justify-self: center;
				align-self: center;
				/* 设置文字居中1 */
				/* display: flex;
				justify-content: center;
				align-items: center; */
				/* 设置文字居中2 */
				display: grid;
				justify-content: center;
				align-items: center;
			}
			/* 自适应
				auto-fill 当一行放满元素之后还有剩余空间 会按最小宽度分配
				auto-fit 当一行放满元素之后还有剩余空间 会按最大宽度分配占满一行
			 */
			#container3 {
				margin-top: 20px;
				display: grid;
			
				grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
				gap: 20px;
			}
			#container3 > div {
					width: auto;
			}
			
		</style>
	</head>
	<body>
		<div id="container">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<div id="container2">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
			<div>9</div>
			<div>10</div>
			<div>11</div>
			<div>12</div>
			<div>13</div>
			<div>14</div>
			<div>15</div>
		</div>
		<h3>自适应</h3>
		<div id="container3">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
			<div>8</div>
			<div>9</div>
			<div>10</div>
			<div>11</div>
			<div>12</div>
			<div>13</div>
			<div>14</div>
			<div>15</div>
		</div>
	</body>
	<script>
		const detectZoom = () => {
			let ratio = 0,
				screen = window.screen,
				ua = navigator.userAgent.toLowerCase();
			if (window.devicePixelRatio !== undefined) {
				ratio = window.devicePixelRatio;
				// ~ 位取反运算符 检测ie
			} else if (~ua.indexOf('msie')) {
				if (screen.deviceXDPI && screen.logicalXDPI) {
					ratio = screen.deviceXDPI / screen.logicalXDPI;
				}
			} else if (
				window.outerWidth !== undefined &&
				window.innerWidth !== undefined
			) {
				ratio = window.outerWidth / window.innerWidth;
			}
			if (ratio) {
				ratio = Math.round(ratio * 100);
			}
			return ratio;
		};
		function setZoom() {
			let m = detectZoom();
			document.body.style.zoom = 100 / Number(m);
		}
		setZoom();
	</script>
</html>
